@import '../../../assets/styles/variables';
@import '../../../assets/styles/mixins';

.menu-tabs {
  &:global(.ant-tabs.ant-tabs-card) {
    > :global(.ant-tabs-bar) {
      background-color: #fff;

      :global {
        .ant-tabs-tab {
          // 换成这个颜色 不配 梯形 更丑了
          // background-color: @cpaas-bgc-color-light;
          font-weight: normal;
          // tabs 的颜色 默认是 #4c4c4c
          // color: #4c4c4c;
          border: 0 none;
          height: 32px;
          background-color: darken(@cpaas-bgc-color-lightest, 5%);
          border-radius: 4px 4px 0 0;
          margin: 3px 2px 0 0;
          padding-left: @cpaas-gutter-md;
          padding-right: @cpaas-gutter-md;
          padding-top: 6px;

          &:first-child {
            border: 0 none;
            margin: 3px 2px 0 3px;
            position: relative;
            z-index: 10;
            background-color: @cpaas-primary-color;
            color: #eee;
          }

          &:last-child {
            margin-right: 3px;
          }

          &.ant-tabs-tab-active {
            color: @cpaas-primary-color-2;
            background-color: @cpaas-bgc-color-lightest;

            &:first-child {
              background-color: lighten(@cpaas-primary-color, 5%);
            }
          }
        }
      }
    }
  }
}

:global {
  .default-menu-tabs {
    &-context-menu {
      .ant-popover-inner-content {
        padding: 0;
      }

      &-item {
        width: 120px;
        // 22 + 8 + 8 = 38
        height: 38px;
        cursor: pointer;
        // 14 + 8 = 22
        .cpaas-font-size(14px);
        line-height: 22px;
        padding-top: 16px;
        padding-bottom: 16px;

        &-icon {
          margin-left: 12px;
        }

        &-text {
          margin-left: 8px;
        }

        &:first-child {
          // 补偿 4px
          margin-top: 4px;
          padding-top: 12px;
        }

        &:last-child {
          // 补偿 4px
          margin-bottom: 4px;
          padding-bottom: 12px;
        }

        &:hover {
          background-color: @cpaas-simple-bgc-color;
        }
      }
    }
  }
}
